<template>
  <div class="step-three center">
    <h3>设置店铺信息</h3>
    <a-form
      ref="formRef"
      class="form"
      :model="formState"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item ref="name" label="店铺名称" name="name">
        <a-input
          :bordered="false"
          class="h-form-input"
          v-model:value="formState.name"
        />
      </a-form-item>
      <a-form-item label="店铺LOGO" name="coverPic">
        <a-upload
          :fileList="fileList"
          accept=".jpg,.png,.gif,.jpeg,.bmp,.svg,.webp,.apng"
          name="coverPic"
          list-type="picture-card"
          class="uploader"
          :show-upload-list="false"
          :action="null"
          :before-upload="beforeUpload"
          @change="handleChange"
        >
          <img
            style="width: 102px; height: 102px"
            v-if="formState.coverPic"
            :src="formState.coverPic"
            alt="avatar"
          />
          <div v-else>
            <loading-outlined v-if="loading"></loading-outlined>
            <plus-outlined
              :style="{ fontSize: '18px', color: '#E8ECF0' }"
              v-else
            ></plus-outlined>
            <div class="ant-upload-text">上传店铺LOGO</div>
            <div class="ant-upload-text">仅支持.JPG.格式</div>
          </div>
        </a-upload>
        <div class="tips">只支持.jpg.格式，限一张</div>
      </a-form-item>
      <a-form-item label="主营业务" required name="mainType">
        <a-checkbox-group
          v-model:value="formState.mainType"
          :options="goodsTypeList"
        />
      </a-form-item>
      <a-form-item label="登录手机号" name="phone">
        <a-form-item>
          <a-input
            :bordered="false"
            placeholder="输入11位数登录手机号"
            class="h-form-input"
            v-model:value="formState.phone"
          />
        </a-form-item>
        <div class="flex" style="gap: 18px">
          <a-input
            :bordered="false"
            class="h-form-input"
            v-model:value="formState.code"
            placeholder="输入6位数验证码"
          />
          <a-button class="h-form-lebel" type="primary" @click="handleSendCode"
            >获取验证码</a-button
          >
        </div>
      </a-form-item>
    </a-form>
    <div class="btns center">
      <a-space>
        <a-button>重置</a-button>
        <a-button type="primary" @click="handleNext">确定注册</a-button>
      </a-space>
    </div>
  </div>
</template>
<script setup>
import { PlusOutlined, LoadingOutlined } from "@ant-design/icons-vue";
import { reactive, ref, onMounted } from "vue";
import { redisterShopInfo, sendAuthCode } from "@/api/user";
import { goodsType } from "@/api/order";
import { singleUploadsFile } from "@/api/upload";
const props = defineProps(["formData"]);
const formRef = ref();
const labelCol = {
  span: 6,
};
const wrapperCol = {
  span: 13,
};
const fileList = ref([
  {
    uid: "-1",
    name: "xxx.png",
    status: "done",
    url: "",
  },
]);
const formState = reactive({
  name: undefined,
  idCardCopy: undefined,
  idCardNational: undefined,
  image: undefined,
  coverPic: undefined,
  mainType: undefined,
  phone: undefined,
  code: undefined,
});
const rules = {
  name: [
    {
      required: true,
      message: "请设置店铺名称",
      trigger: "blur",
    },
  ],
  coverPic: [
    {
      required: true,
      message: "请上传店铺LOGO",
      trigger: "change",
    },
  ],
  phone: [
    {
      required: true,
      message: "请输入手机号",
      trigger: "blur",
    },
  ],
  mainType: [
    {
      required: true,
      message: "请选择主营业务",
      trigger: "change",
    },
  ],
};
const goodsTypeList = ref([]);
const getGoodsType = async () => {
  const result = await goodsType();
  if (result.code == 200) {
    goodsTypeList.value = result.data.map((res) => {
      return {
        label: res.name,
        value: res.id,
      };
    });
  }
};
function beforeUpload(file) {
  //判断是否小于20M
  let isLt20M = file.size < 1024 * 1024 * 20;
  if (!isLt20M) {
    //将fileList中本次file文件删掉
    message.error("所选文件单个超过20M，已自动过滤，请检查~");
  }
  return false;
}
const loading = ref(false);
const handleChange = (file) => {
  let formData = new FormData();
  formData.append("file", file.file);
  formData.append("type", "1");
  singleUploadsFile(formData).then((res) => {
    console.log(res);
    if (res.code == 200) {
      formState.coverPic = res.data;
      fileList.value = [
        {
          uid: "-1",
          name: "xxx.png",
          status: "done",
          url: res.data,
        },
      ];
    }
  });
};
function handleSendCode() {
  sendAuthCode({ phone: formState.value.phone });
}
const handleNext = () => {
  formRef.value
    .validate()
    .then((res) => {
      const params = {
        name: formState.name,
        coverPic: formState.coverPic,
        mainType: formState.mainType,
        phone: formState.phone,
        code: formState.code,
        idCardCopy: props.formData.idCardCopy,
        idCardNational: props.formData.idCardNational,
        image: props.formData.image
      };
      redisterShopInfo(params).then((res) => {
        console.log(res);
        if(res.code == 200){
          emits("handleSubmit", 3, idCardInfo.value);
        }
      });
    })
    .catch((err) => {
      console.log(err);
    });
};
onMounted(() => {
  getGoodsType();
});
</script>
<style lang="less" scoped>
.form {
  text-align: left;
  .h-form-input {
    height: 36px;
    background-color: #f3f5f7;
  }
  .tips {
    font-size: 12px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #9599a5;
    line-height: 14px;
    margin-top: 8px;
  }
}
.uploader {
  width: 86px;
  height: 86px;
  background: #f3f5f7;
  border-radius: 8px;
}
:deep(.ant-upload.ant-upload-select-picture-card) {
  width: 100% !important;
  height: 100% !important;
  background-color: transparent !important;
  border: none !important;
  margin: 0 !important;
}
</style>
